<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>学生列表 | 学生管理系统 | 菜鸟基地</title>
    <style>
        td {
            text-align: center;
        }
    </style>
</head>

<body>
    <h1>学生列表</h1>
    <p>
        <a href="/student/insert">添加学生</a>
        <a href="/logout">退出登录</a>
    </p>
    <table border="1" width="100%">
        <tbody>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>学号</th>
                <th>班级</th>
                <th>操作</th>
            </tr>
            <tr id="no_data">
                <td colspan="7" align="center">暂无数据</td>
            </tr>
        </tbody>
    </table>
    <script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
    <script>
        $(function () {
            var sex_kvs = { '0': '未知', '1': '男', '2': '女' };
            var $no_data = $('#no_data');
            $.post('/api/students', {}, function (res) {
                if (res.code === 1) {
                    var students = res.data;
                    if (students.length > 0) {
                        $no_data.hide();
                    }
                    var html = '';
                    $.each(students, function (index, student) {
                        html +=
                            '<tr>' +
                                '<td>' + (index + 1) + '</td>' +
                                '<td>' + student.name + '</td>' +
                                '<td>' + sex_kvs[student.sex] + '</td>' +
                                '<td>' + student.age + '</td>' +
                                '<td>' + student.no + '</td>' +
                                '<td>' + student.class_name + '</td>' +
                                '<td>' +
                                    '<a href="/student/update?id=' + student.id + '">修改</a>' +
                                    '&nbsp;<a href="javascript:;" class="delete" data-id="' + student.id + '"  data-name="' + student.name + '">删除</a>' +
                                '</td>' +
                            '</tr>'
                            ;
                    });
                    $('tbody').append(html);
                    $('.delete').click(function () {
                        var $this = $(this);
                        var name = $this.data('name');
                        var yes = confirm('你确定删除 "' + name + '" ?');
                        if (yes) {
                            var id = $this.data('id');
                            $.post('/api/student/delete', { id: id }, function (res) {
                                alert(res.msg);
                                if (res.code === 1) {
                                    $this.parent().parent().remove();
                                    if ($('tbody > tr').length === 2) {
                                        $no_data.show();
                                    }
                                }
                            });
                        }
                    });
                } else {
                    alert(res.msg);
                }
            });
        });
    </script>
</body>

</html>